<template>
    <rx-layout>
        <div slot="left" width="250" showButton="true">
            <rx-fit>
                <rx-category-treeeditor
                    cat-key="EXTERNAL_API"
                    :statisticConfig="statisticConfig"
                    :edit="true"
                    @handSelect="handSelect"
                    :async="true"
                    v-if="isShowManageTree"
                    :isAdmin="false"
                    :checkToDel="true"
                    :isGrant="false"
                ></rx-category-treeeditor>
            </rx-fit>
        </div>
        <div slot="center" style>
            <rx-fit>
                <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
                    <div class="table-operator">
                        <rx-button alias="sysExternalApiAdd" :butn-icon="'plus'" :butn-type="'primary'"
                                   :show-no-right="true" @click="add">{{$ti18('rxList.add','新增')}}
                        </rx-button>
                        <rx-button v-if="removeEnable && selectedRowKeys.length > 0" alias="sysExternalApiDelete" :butn-icon="'delete'" :butn-type="'danger'"
                                   :show-no-right="false" @click="delByIds(selectedRowKeys)">{{$ti18('rxList.delBtn','删除')}}
                        </rx-button>
                        <a-button v-if="selectedRowKeys.length > 0"
                                  type="primary"
                                  icon="switcher" @click="openCategoryDialog">
                            {{$ti18('rxList.changeCategory','切换分类')}}
                        </a-button>

                    </div>
                    <span class="search-btn-box">
                <span class="search-btn" @click="searchshow"><i class="iconfont iconguolv"></i>{{$ti18('rxList.leachBtn','过滤')}}</span>
           </span>
                </div>
                <div slot="searchbar" btnalign="right" v-if="fitSearch" @search="search" @cancel="cancel"
                     @close="close">
                    <a-form layout="vertical">
                        <a-form-item :label="i18n('form.apiName','接口名称')">
                            <a-input :placeholder="i18n('form.apiName','接口名称','input')" v-model="queryParam.Q_API_NAME__S_LK"/>
                        </a-form-item>
                        <a-form-item :label="i18n('form.service','所属服务')">
                            <a-input :placeholder="i18n('form.service','所属服务')" v-model="queryParam.Q_SERVICE__S_LK"/>
                        </a-form-item>
                        <a-form-item :label="i18n('form.type','类型')">
                            <a-select :placeholder="i18n('form.type','类型','select')" v-model="queryParam.Q_TYPE__S_EQ" :getPopupContainer="p=>p.parentNode">
                                <a-select-option value="form">{{i18n('form.form','表单')}}</a-select-option>
                                <a-select-option value="sql">{{i18n('form.customQuery','自定义查询')}}</a-select-option>
                                <a-select-option value="script">{{i18n('form.callScripts','调用脚本')}}</a-select-option>
                                <a-select-option value="liteFlow">{{i18n('form.callLiteFlow','执行规则引擎')}}</a-select-option>
                                <a-select-option value="default">{{i18n('form.sysApi','系统接口')}}</a-select-option>
                                <a-select-option value="custom">{{i18n('form.customApi','自定义接口')}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :bordered="isBorder"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-system/system/core/sysExternalApi/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10','30','40']"
                    id-field="id"
                    @selectChange="onSelectChange"
                >
                    <span slot="type" slot-scope="{ text, record }">
                         <a-tag :color="tagMap[text].color">
                           <span>{{ tagMap[text].text }}</span>
                         </a-tag>
                    </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                         <span  @click.stop="detail(record)">{{i18n('list.detail','详情')}}</span>
                        <span v-if="record.type!='form' && record.type!='sql'" @click.stop="edit(record)">{{$ti18('rxList.editBtn','编辑')}}</span>
                        <span v-if="record.type!='default'" @click.stop="delByIds([record.id])">{{$ti18('rxList.delBtn','删除')}}</span>
                      </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import SysExternalApiApi from '@/api/system/core/sysExternalApi'
import SysExternalApiDetail from './SysExternalApiDetail'
import SysExternalApiEdit from './SysExternalApiEdit'
import {BaseList, RxFit, RxGrid,Util} from "@lowcode/jpaas-common-lib";
import RxCategoryTreeeditor from "@/components/redxun/rx-category-treeeditor.vue";
import ChangeCategory from "@/views/modules/share/ChangeCategory.js";

export default {
    name: 'SysExternalApiList',
    mixins: [BaseList,ChangeCategory],
    components: {
        RxCategoryTreeeditor,
        RxFit
    },
    data() {
        return {
            columns: [
                {title: this.$ti18('rxList.index','序号'), type: 'indexColumn', width: 60, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                {title: this.i18n('form.apiName','接口名称'), dataIndex: 'apiName', width: 150},
                {title: this.i18n('form.service','所属服务'), dataIndex: 'service', width: 100},
                {title: this.i18n('form.method','请求方法'), dataIndex: 'method', width: 100},
                {title: this.i18n('form.type','类型'), dataIndex: 'type', width: 100, scopedSlots: {customRender: 'type'}},
                {title: this.i18n('form.path','路径'), dataIndex: 'path', width: 250},
                {title: this.$ti18('rxForm.createTime','创建时间'), dataIndex: 'createTime', sorter: true, sortField: 'CREATE_TIME_', width: 150},
                {title: this.$ti18('rxList.action','操作'), width: 160, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
            ],
            component: SysExternalApiEdit,
            comment: this.i18n('list.comment','对外API接口'),
            widthHeight: ['1250px', '750px'],
            fitSearch: false,
            tagMap:{
                form: {color: 'green', text: this.i18n('form.form','表单')},
                sql: {color: 'orange', text: this.i18n('form.customQuery','自定义查询')},
                script: {color: 'purple', text: this.i18n('form.callScripts','调用脚本')},
                liteFlow: {color: 'yellow', text: this.i18n('form.callLiteFlow','执行规则引擎')},
                default: {color: 'red', text: this.i18n('form.sysApi','系统接口')},
                custom: {color: 'blue', text: this.i18n('form.customApi','自定义接口')}
            },
            statisticConfig: {
                type:"static_system",
                table:"SYS_EXTERNAL_API",
                field:"CATEGORY_ID_",
                whereConf: []
            },
            //变更分类配置
            categoryConfig:{
                Api:SysExternalApiApi,
                catKey:"EXTERNAL_API",
                gridRef:"table"
            }
        }
    },
    created() {
        this.isUserManager();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"SysExternalApi",key);
        },
        delById(ids) {
            return SysExternalApiApi.del({ids: ids.join(',')});
        },
        delByIds(ids) {
            let self_ = this;
            var newIds=[];
            for (let i = 0; i < ids.length; i++) {
                var data=self_.$refs.table.dataAction.find(item=>item.id==ids[i]);
                if(data.type!='default'){
                    newIds.push(ids[i]);
                }
            }
            if(newIds.length==0){
                this.$message.error(this.i18n('msa.sysDelTips','系统接口无法删除!'));
                return ;
            }
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                zIndex: 20000,
                content: this.i18n('msa.delInfo','您确定...'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    self_.delById(newIds).then(res => {
                        if (res.success && res.code == 200) {
                            self_.refreshGrid()
                        }
                        self_.selectedRowKeys = [];
                        self_.selectedRows = [];
                    })
                },
                onCancel() {
                }
            })
        },
        getListByParams(parameter) {
            return SysExternalApiApi.query(parameter)
        },
        detail(record){
            var conf = {
                component: SysExternalApiDetail,
                curVm: this,
                data:{
                    "pkId": record.id,
                },
                widthHeight: ['1250px', '750px'],
                title: this.i18n('list.comment','对外API接口管理')
            }
            Util.open(conf,function (){});
        },
        handSelect(curRow) {
            this.curTree = curRow
            var treeId = curRow.treeId;
            if (treeId != "0") {
                this.queryParam.Q_CATEGORY_ID__S_EQ = treeId;
            } else {
                delete this.queryParam.Q_CATEGORY_ID__S_EQ;
            }
            this.loadData(this.queryParam);
        },
    }
}
</script>
<style scoped>

</style>

